import Taro from '@tarojs/taro';
import { useState } from 'react';
import {
  AtForm,
  AtInput,
  // AtImagePicker,
} from 'taro-ui';
import { View, Button } from '@tarojs/components';
import { Uploader } from "@antmjs/vantui";
import "./copyright-sub.scss";
// import "@antmjs/vantui/es/uploader/style";

const Submit = () => {
  // const picList = [
  //   {
  //     url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg'
  //   },
  //   {
  //     url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg'
  //   },
  //   {
  //     url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png'
  //   }
  // ];


  // const handleChange = (value) => {
  //   setName(value)
  //   return value
  // }

  const onSubmit = () => {
    const obj = {
      fileList,
      thing
    };
    try {
      Taro.cloud
        .callFunction({
          name: 'logins',
          data: {
            $url: 'addAgent',
            data: obj
          }
        })
        .then(() => {
          Taro.showToast({ title: '资料上传成功' }).then();
          setTimeout(function () {
            // 要延时执行的代码
            Taro.navigateTo({ url: '/pages/copyright/copyright-submit/copyright-submit' }).then()
          }, 1000)

        });
    } catch (e) {
      console.log(e);
    }

  }

  const [thing, setThing] = useState<any>('');
  const [fileList, setFileList] = useState<any>([]);
  // const [state, setState] = useState([]);



  const afterRead = (event: any) => {

    const { file } = event.detail;
    uploadToCloud(file)
  }

  const uploadToCloud = (data: any) => {

    Taro.cloud.init();
    if (!data.length) {
      Taro.showToast({ title: "请选择图片", icon: "none" });
    } else {
      const uploadTasks = data.map((file: any) => uploadFilePromise(file));
      Taro.showLoading({ title: "上传中" });
      Promise.all(uploadTasks)
        .then(data => {
          Taro.showToast({ title: "上传成功", icon: "none" });
          const newFileList = data.map((item: any) => ({
            url: item.fileID
          }));
          // setState({ cloudPath: data, fileList: newFileList });
          setFileList(newFileList)
        })
        .catch(e => {
          Taro.showToast({ title: "上传失败", icon: "none" });
          console.log(e);
        });
    }
  }


  const uploadFilePromise = (chooseResult: any) => {
    return Taro.cloud.uploadFile({
      cloudPath: new Date().getTime() + ".png",
      filePath: chooseResult.url
    });
  }

  const handleDelete = (event: any) => {
    Taro.cloud.init();
    const { fileList, index, file } = event.detail;
    Taro.cloud.deleteFile({
      fileList: [file.url]
    })
      .then(res => {
        console.log(res);
        fileList.splice(index, 1);
        setFileList({ fileList })
      })
  }






  return (
    <View className='doc'>
      <View className='doc-information'>
        {/* 表单 */}
        <AtForm>
          <View className='doc-subpic'>
            <View className='doc-title'>上传委托代理书</View>
            <View className='doc-pic'>
              <Uploader
                fileList={fileList}
                onAfterRead={afterRead}
                multiple
                onDelete={handleDelete}
                maxCount={1}
              />
              {/* <AtImagePicker
                length={3}
                files={files}
                onChange={(res) => {
                  onChange(res);
                }}
              /> */}
            </View>
          </View>
          <View className='doc-title'>具体委托事项</View>
          <AtInput
            name='address'
            type='text'
            placeholder='请输入具体委托事项'
            value={thing}
            onChange={(res) => {
              setThing(res);
            }}
          />

          {/* <View className="sub"> */}
          <Button
            // type='warn'
            className='sub-btn'
            onClick={() => onSubmit()}
          >
            提交
          </Button>
          {/* </View> */}
        </AtForm>
        {/* <AtToast isOpened text="{card}" icon="{icon}"/> */}
      </View>
    </View>
  );
};

export default Submit;
